<template>
  <view class="top-menu">
    <!-- 背景图容器 -->
    <view class="background-container">
      <image 
        class="background-image" 
        src="/static/home/head-pic.jpg" 
        mode="aspectFill"
      ></image>
    </view>
    
    <!-- 按钮容器 -->
    <view class="buttons-container">
      <view class="button-item rebiao-button" @click="handleRebiaoClick">
        <view class="button-icon">
          <image 
            class="icon-image" 
            src="/static/home/rebiao-icon.png" 
            mode="aspectFit"
          ></image>
        </view>
        <view class="button-content">
          <text class="button-title">热表信息</text>
          <text class="button-subtitle">ReBiaoXinXi</text>
        </view>
      </view>
      
      <view class="button-item famen-button" @click="handleFamenClick">
        <view class="button-icon">
          <image 
            class="icon-image" 
            src="/static/home/famen-icon.png" 
            mode="aspectFit"
          ></image>
        </view>
        <view class="button-content">
          <text class="button-title">阀门信息</text>
          <text class="button-subtitle">FaMenXinXi</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: 'TopMenu',
  methods: {
    handleRebiaoClick() {
      uni.navigateTo({ url: '/pages/subPackageHome/device-list/index' })
    },
    handleFamenClick() {
      uni.navigateTo({ url: '/pages/subPackageHome/device-list/index' })
    }
  }
}
</script>

<style lang="scss" scoped>
.top-menu {
  position: relative;
  margin-bottom: 80rpx;
  
  .background-container {
    position: relative;
    width: 100%;
    height: 300rpx;
    overflow: hidden;
    
    .background-image {
      width: 100%;
      height: 100%;
    }
  }
  
  .buttons-container {
    position: absolute;
    bottom: -50rpx;
    left: 50%;
    transform: translateX(-50%);
    display: flex;
    gap: 40rpx;
    z-index: 10;
    
    .button-item {
      display: flex;
      flex-direction: row;
      align-items: center;
      width: 280rpx;
      height: 120rpx;
      border-radius: 24rpx;
      padding: 10rpx 20rpx;
      box-shadow: 0 12rpx 32rpx rgba(0, 0, 0, 0.15);
      
      &.rebiao-button {
        background: linear-gradient(135deg, #ff6b6b, #ff8e8e);
      }
      
      &.famen-button {
        background: linear-gradient(135deg, #51cf66, #69db7c);
      }
      
      .button-icon {
        width: 80rpx;
        height: 80rpx;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-left: 20rpx;
        margin-right: 30rpx;
        flex-shrink: 0;
        
        .icon-image {
          width: 100%;
          height: 100%;
        }
      }
      
      .button-content {
        display: flex;
        flex-direction: column;
        justify-content: center;
        flex: 1;
        
        .button-title {
          font-size: 32rpx;
          color: #fff;
          font-weight: 600;
          line-height: 1.2;
          margin-bottom: 4rpx;
        }
        
        .button-subtitle {
          font-size: 22rpx;
          color: rgba(255, 255, 255, 0.8);
          font-weight: 400;
          line-height: 1.2;
        }
      }
    }
  }
}
</style>